<template>
	<!-- 分享弹窗 -->
	<view @touchmove.prevent.stop class="share-popup">
		<u-popup :show="sharePopupShow" type="bottom" @close="sharePopupClose" overlayOpacity="0.8">

			<view @touchmove.prevent.stop>

				<view class="poster-img-wrap flex flex-col" :style="{ 'top': shareTop }">

					<image v-if="isPosterAnimation" class="poster-animation" :src="img('addon/shop/poster_animation.gif')"
						mode="aspectFit"></image>
					<image v-if="isPosterImg" class="poster-img" :src="img(poster)" mode="aspectFit"
						:show-menu-by-longpress="true"></image>
				</view>

				<view class="share-content">
					<view class=" w-full mb-[20rpx]">
						分享文案: {{ props.copyText }}
					</view>
					<view class="share-box" @click="copyText">
						<button class="share-btn" :plain="true">
							<view class="text-[#07c160] iconfont iconfuzhi"></view>
							<text>复制文案</text>
						</button>
					</view>
					<!-- #ifdef MP || APP-PLUS  -->
					<view class="share-box">
						<button class="share-btn" :plain="true" open-type="share">
							<view class="text-[#07c160] iconfont iconweixin11"></view>
							<text>分享给好友</text>
						</button>
					</view>

					<view class="share-box">
						<button class="share-btn" :plain="true" @click="savePoster()">
							<view class="text-[#07c160] iconfont iconpengyouquan"></view>
							<text>保存海报</text>
						</button>
					</view>
					<!-- #endif -->

					<!-- #ifdef H5 -->
					<view class="share-box" @click="copyUrl">
						<button class="share-btn" :plain="true">
							<view class="text-[#07c160] iconfont iconfuzhilianjie"></view>
							<text>复制链接</text>
						</button>
					</view>
					<!-- #endif -->

				</view>
				<view class="share-footer" @click="sharePopupClose"><text>取消分享</text></view>
			</view>
		</u-popup>
		<u-popup :show="show" mode="center" :round="10" :closeable="true" @close="show = false"
			:safe-area-inset-bottom="false">
			<view class="dialog-popup">
				<view class="title">提示</view>
				<view class="message">您拒绝了保存图片到相册的授权请求，无法保存图片到相册，如需正常使用，请授权之后再进行操作。</view>
				<view class="action-wrap">
					<view @click="closeDialog">取消</view>
					<view>
						<button type="default" class="authorization-btn" open-type="openSetting" @opensetting="closeDialog"
							hover-class="none">立即授权</button>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { img, copy } from '@/utils/common';
import { getPosterTwo } from '@/app/api/system'

const props = defineProps({
	posterId: {
		type: String || Number,
		default: '0'
	},
	posterType: {
		type: String,
		default: ''
	},
	posterParam: {
		type: Object,
		default: {}
	},
	copyUrl: { // 例 "/wap/addon/shop_fenxiao/pages/goods"
		type: String,
		default: ''
	},
	copyText: { // 例 "/wap/addon/shop_fenxiao/pages/goods"
		type: String,
		default: ''
	},
	copyUrlParam: {
		type: String,
		default: ''
	},
	shareBgUrlParam: {
		type: String,
		default: ''
	},
	shareUrl: {
		type: String,
		default: ''
	}

})

const emits = defineEmits(['close'])

const sharePopupShow = ref(false);

// 复制
const copyUrl = () => {
	let data = ''
	if (props.copyUrl) {
		let pathName = location.pathname;
		let packageArr: any = ['/app/', '/addon/'];
		for (let i = 0; i < packageArr.length; i++) {
			if (pathName.indexOf(packageArr[i]) != -1) {
				pathName = pathName.substr(0, pathName.indexOf(packageArr[i]));
			}
		}
		data = location.origin + pathName + props.copyUrl + props.copyUrlParam;
	} else {
		data = location.origin + location.pathname + props.copyUrlParam;
	}
	console.log(data)

	copy(data, () => {
		sharePopupShow.value = false;
	});
}
const copyText = () => {
	let data = ''
	if (props.copyText) {

		data = props.copyText
	} else {
		data = props.copyText;
	}
	console.log(data)

	copy(data, () => {
		// sharePopupShow.value = false;
	});
}


const openShare = () => {
	sharePopupShow.value = true
	loadPoster();
}

//生成海报
const isPosterAnimation = ref(false)
const isPosterImg = ref(false)
// 获取分享海报
const poster = ref('');
const loadPoster = () => {
	if (poster.value) {
		// 预加载
		isPosterAnimation.value = false;
		isPosterImg.value = true;
	} else {
		isPosterAnimation.value = true;
		isPosterImg.value = false;
		let scene = props.copyUrlParam.split('?')[1]

		let obj = {
			// id: props.posterId,
			// type: props.posterType,
			// param: props.posterParam,
			checkPath: false,
			backgroundUrl: props.shareBgUrlParam,
			path: props.shareUrl,
			scene: encodeURIComponent(scene)
		}
		let startTime = Date.parse(new Date());
		getPosterTwo(obj).then((res: any) => {
			poster.value = res.data && img(res.data) || '';

			let endTime = Date.parse(new Date());
			let time = endTime - startTime;
			let periodTime = 2200;
			if (time < periodTime) {
				setTimeout(() => {
					isPosterAnimation.value = false;
					isPosterImg.value = true;
				}, (periodTime - time))
			} else {
				isPosterAnimation.value = false;
				isPosterImg.value = true;
			}
		}).catch(() => {
			sharePopupClose();
		})
	}
}
const show = ref(false);

const closeDialog = () => {
	show.value = false;
}

// #ifdef MP || APP-PLUS
//小程序中保存海报
const savePoster = () => {
	let url = img(poster.value);
	uni.downloadFile({
		url: url,
		success: (res) => {
			if (res.errMsg == "downloadFile:ok") {
				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success: () => {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						});
					},
					fail: (err) => {
						if (err.errno == 104) {
							let msg = '用户未授权隐私权限，将图像保存到相册失败';
							uni.showToast({ title: msg, icon: 'none' })
						} else if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny" ||
							err.errMsg == "saveImageToPhotosAlbum:fail:auth denied") {
							show.value = true;
						} else if (err.errMsg == "saveImageToPhotosAlbum:fail cancel") {
							let msg = '用户取消将图片保存到相册';
							uni.showToast({ title: msg, icon: 'none' })
						} else {
							uni.showToast({ title: err.errMsg, icon: 'none' })
						}
					}
				});
			}
		},
		fail: (err) => {
			uni.showToast({
				title: err.errMsg,
				icon: 'none'
			});
		}
	});
}
// #endif

const shareTop: any = ref(0)
/************ 获取微信头部-start ****************/
// 获取系统状态栏的高度
let menuButtonInfo: any = {};
// 如果是小程序，获取右上角胶囊的尺寸信息，避免导航栏右侧内容与胶囊重叠(支付宝小程序非本API，尚未兼容)
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
shareTop.value = menuButtonInfo.top + menuButtonInfo.height + 'px';
// #endif
/************ 获取微信头部-end ****************/

const sharePopupClose = () => {
	sharePopupShow.value = false;
	isPosterAnimation.value = false;
	isPosterImg.value = false;
	emits('close');
}

defineExpose({
	openShare,
	loadPoster
})
</script>
<style lang="scss" scoped>
.share-popup {

	:deep(.u-transition),
	:deep(.u-popup__content) {
		background-color: transparent;
	}

	.share-content {
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		overflow: hidden;
		display: flex;
		display: -webkit-flex;
		-webkit-flex-wrap: wrap;
		-moz-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		-o-flex-wrap: wrap;
		flex-wrap: wrap;
		padding: 40rpx 15rpx;
		background-color: #fff;

		.share-box {
			flex: 1;
			text-align: center;

			.share-btn {
				margin: 0;
				padding: 0;
				border: none;
				line-height: 1;
				height: auto;
				background: none;

				text {
					margin-top: 20rpx;
					font-size: 24rpx;
					display: block;
					color: #333;
				}
			}

			.iconfont {
				font-size: 80rpx;
				line-height: initial;
			}

			.icon-fuzhilianjie,
			.icon-pengyouquan,
			.icon-haowuquan,
			.icon-share-friend {
				color: #07c160;
			}
		}
	}

	.share-footer {
		background-color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		border-top: 2rpx solid #eee;
		text-align: center;
		font-size: 26rpx;
	}

}

.poster-img-wrap {
	position: fixed;
	top: 0;
	left: 0;
	bottom: calc(constant(safe-area-inset-bottom) + 300rpx); //300是海报弹窗下面高度的问题
	bottom: calc(env(safe-area-inset-bottom) + 300rpx);
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;

	.poster-img {
		width: 80%;
		height: 80%;
	}

	.poster-animation {
		width: 60%;
		height: 65%;
	}
}

.dialog-popup {
	width: 580rpx;
	background: #fff;
	box-sizing: border-box;
	border-radius: 10rpx;
	overflow: hidden;
	height: initial;

	.title {
		padding: 30rpx 30rpx 0 30rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
	}

	.message {
		padding: 0 30rpx;
		color: #666;
		text-align: center;
		line-height: 1.3;
		margin-top: 30rpx;
	}

	.action-wrap {
		margin-top: 50rpx;
		height: 80rpx;
		display: flex;
		border-top: 2rpx solid #eee;

		&>view {
			flex: 1;
			text-align: center;
			line-height: 80rpx;

			&:first-child {
				border-right: 2rpx solid #eee;
				color: #999;
			}

			button {
				border: none;
				line-height: 80rpx;
				padding: 0;
				margin: 0;
				width: 100%;
				height: 100%;
			}
		}
	}

	.authorization-btn {
		background-color: #07c160;
		color: #fff;
		font-size: 28rpx;
		border-radius: 0;
	}
}
</style>
